<template>
  <view class="index">
    <view class="banner">
      <view class="license">
        <el-image style="width: 80rpx; height: 80rpx" :src="url" :preview-src-list="srcList">
        </el-image>
      </view>
    </view>

    <view class="signboard">
      <view class="intro">
        <view class="name">随乡饺子馆</view>
        <view class="rating">
          <image src="../../static/index/rating.png" mode="aspectFill"></image>{{businessObj.avgRate.toFixed(1)}}
        </view>
        <view class="location">
          <image src="../../static/index/location.png" mode="aspectFill"></image>高新校区-二食堂-1楼
        </view>
<!--        <view class="license">
          <image src="../../static/index/license.png" mode="aspectFill"></image>查看营业执照
        </view> -->
        <view class="desc">各式各样的饺子一应俱全，皮薄馅多。还有面条、馄饨、抄手、醪糟汤圆、荷包蛋……</view>
      </view>
      <image class="logo" src="../../static/index/logo.png" mode="aspectFill"></image>
    </view>

    <view class="main">
      <view class="type">
        <view class="type-item" :class="activeType==index ? 'type-item-active' : ''" v-for="(item, index) in typeArr"
          :key="index" @click="clickType(index)">
          {{item.name}}
        </view>
      </view>
      <view class="menu">
        <view class="menu-item" v-for="(item, index) in dishArr" :key="index" @click="clickDish(item)">
          <view class="menu-item-image">
            <image class="image" :src="'/api/images/dish/' + item.image"></image>
            <image class="hotSales" v-if="item.hotSales==1" src="../../static/index/hot.png" mode="aspectFill"></image>
          </view>

          <view class="menu-item-info">
            <view class="name">
              {{item.name}}<text class="size">（{{item.size}}）</text>
            </view>
            <view class="price">
              ￥{{item.price.toFixed(1)}}
            </view>
            <view class="discount" v-if="item.discount<1">
              {{item.discount.toFixed(1)}}折
            </view>
            <image class="add" src="../../static/index/add.png" mode="aspectFill" @click="dialogVisible = true"></image>

            <el-dialog title="提示" :visible.sync="dialogVisible" width="85%" :before-close="handleClose">
              <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="clickOK()">确定</el-button>
              </span>
            </el-dialog>

          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        url: '../../static/index/license.png',
        srcList: [
          '/api/images/business/license-d.jpg'
        ],
        businessObj: {
          name: '店铺名字',
          address: '地址',
          tel: '136xxx',
          avgRate: 5.0
        },
        typeArr: [],
        dishArr: [],
        activeType: 0,
        activeDish: null,
        dialogVisible: false,
        num: 1
      }
    },
    onLoad() {
      setTimeout(() => {
        this.setDishArr()
      }, 1000)
    },
    onShow() {
      this.setTypeArr()
    },
    methods: {
      clickType(index) {
        this.activeType = index
        this.dishArr = []
        this.setDishArr()
      },
      clickDish(item) {
        this.activeDish = item
      },
      setDishArr() {
        if (this.typeArr.length == 0) {
          return
        }
        // console.log(this.typeArr[this.activeType])
        uni.request({
          url: '/api/dishes',
          method: 'GET',
          data: {
            category: this.typeArr[this.activeType].name
          },
          success: (res) => {
            // console.log(res)
            this.dishArr = res.data.data
          },
          fail: (res) => {
            console.log(res)
          }
        })
      },
      setTypeArr() {
        uni.request({
          url: '/api/categories',
          method: 'GET',
          success: (res) => {
            // console.log(res)
            this.typeArr = res.data.data
          },
          fail: (res) => {
            console.log(res)
          }
        })
      },
      setBusinessObj() {
        uni.request({
          url: '/'
        })
      },
      handleClose(done) {
        done();
      },
      handleChange(value) {
        // console.log(value)
      },
      clickOK() {
        this.dialogVisible = false
        if (uni.getStorageSync('id') == "") {
          this.$message.warning('请登录')
          // 重置数量
          this.num = 1
          return
        }
        // console.log(dish)
        // console.log(this.activeDish);
        let dish = this.activeDish
        console.log(dish);
        uni.request({
          url: '/api/shopping_carts',
          method: 'POST',
          data: {
            dishName: dish.name,
            dishSize: dish.size,
            dishPrice: dish.price,
            dishNum: this.num,
            dishImage: dish.image,
            dishDiscount: dish.discount,
            dishId: dish.id,
            consumerId: uni.getStorageSync('id')
          },
          success: (res) => {
            console.log(res.data);
          }
        })

        // 重置数量
        this.num = 1
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {
    background: #f6f6f6;
  }

  .banner {
    background: url('../../static/index/mainBg.png');
    background-repeat: no-repeat;
    width: 750rpx;
    height: 304rpx;
    // max-width: 750rpx;
    background-size: contain;
    
    position: relative;
    
    .license {
      position: absolute;
      top: 10rpx;
      right: 10rpx;
    }
  }

  .signboard {
    margin: 20rpx 0;
    display: flex;
    align-items: center;
    max-width: 750rpx;
    padding: 20rpx;
    background: rgba(254, 255, 189, 0.5);
    border-radius: 20rpx;

    .intro {
      flex-grow: 1;
      display: grid;
      grid-gap: 10rpx;
      grid-template-columns: 1fr 5fr;

      image {
        width: 25rpx;
        height: 25rpx;
        margin-right: 15rpx;
      }

      .name {
        font-size: 1.2rem;
        grid-column: 1 / 3;
        grid-row: 1 / 2;
      }

      .rating {
        font-size: 0.8rem;
      }

      .location {
        font-size: 0.8rem;
      }

      // .license {
      //   font-size: 0.8rem;
      //   grid-column: 1 / 3;
      //   grid-row: 3 / 4;
      // }

      .desc {
        font-size: 0.8rem;
        grid-column: 1 / 3;
        grid-row: 4 / 5;

      }
    }

    .logo {
      width: 100rpx;
      height: 100rpx;
      min-width: 100rpx;
      margin: 20rpx;
    }
  }

  .main {
    display: flex;


    .type {
      flex-basis: 150rpx;
      min-width: 150rpx;
      overflow: auto;
      height: 100vh;
    }

    .type-item {
      flex-basis: 150rpx;
      min-width: 150rpx;
      min-height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: #f6f6f6;
    }

    .type-item-active {
      background: #fff;
    }

    .menu {
      flex-grow: 1;
      overflow: auto;
      height: 100vh;
      background-color: #f6f6f6;
    }

    .menu-item {
      min-height: 200rpx;
      margin: 20rpx 0;
      background-color: #fff;
      padding: 15rpx;
      display: flex;
      align-items: center;

      &:nth-child(1) {
        margin-top: 0;
      }

      .menu-item-image {
        position: relative;

        .image {
          width: 150rpx;
          height: 150rpx;
        }

        .hotSales {
          width: 60rpx;
          height: 60rpx;
          position: absolute;

          top: -10rpx;
          right: -10rpx;

        }
      }

      .menu-item-info {
        padding: 15rpx;
        flex-grow: 1;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: 2rem 1rem 1rem;

        .name {
          grid-column: 1 / 4;
          font-size: 1.2rem;

          // 文字超出用...表示
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          .size {}
        }



        .price {
          color: #fe4d46;
        }

        .discount {
          color: #fe4d46;
        }

        .add {
          grid-column: 3 / 4;
          grid-row: 2 / 3;
          width: 50rpx;
          height: 50rpx;
        }


      }
    }
  }
</style>